<template>
  <div class="editor-wrap">
    <p class="title">发布文章</p>
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden; border-bottom: 1px solid #ccc"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
  <div>
    <el-button type='primary' @click="handleChange">保存</el-button>
  </div>
</template>
<script setup lang="ts">
import {  shallowRef,ref,onBeforeUnmount} from 'vue';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { IToolbarConfig } from '@wangeditor/editor'

/* 工具栏配置 */
const toolbarConfig: Partial<IToolbarConfig> = {  // TS 语法
  excludeKeys: ["insertLink", "insertImage", "editImage", "viewImageLink", "group-video", "emotion", "fullScreen"],
}
const editorRef = shallowRef()
const mode = 'default'
const valueHtml:any  = ref('')
const editorConfig = { placeholder: '请输入内容...' }
const handleChange = () => {
      console.log('change:', editorRef.value.getHtml());
};
// const articleList =reactive({
//   content:valueHtml,
//   name:"test",
// })


onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
  })
const handleCreated = (editor:any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
 }
</script>
<style scoped></style>